<template>
  <ECharts ref="chart" :id="id" :class="className" :style="{ height: height }"></ECharts>
</template>
<script>
import echarts from 'echarts'
import { h, defineComponent, ref, onMounted, defineProps } from 'vue'
import { createComponent } from 'echarts-for-vue'
import ResizeObserver from 'resize-observer-polyfill'
export default defineComponent({
  components: {
    ECharts: createComponent({ echarts, h, ResizeObserver }),
  },
})
</script>
<script setup>
const props = defineProps({
  className: {
    type: String,
    default: 'chart',
  },
  id: {
    type: String,
    default: 'chart',
  },
  height: {
    type: String,
    default: '200px',
  },
  xAxis: {
    type: Array
  },
  legend: {
    type: Array
  },
  series: {
    type: Array
  }
})

const chart = ref(null)
onMounted(() => {
  console.log(props.xAxis)
  chart.value.setOption({
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['Email']
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: props.xAxis
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: 'Email',
        type: 'line',
        stack: 'Total',
        data: props.series
      }
    ]
  })
})
</script>
<style lang="scss" scoped>
.item {
  margin-top: 20px;
  span {
    font-size: 14px;
  }
}
</style>
